import React, { useState, useEffect } from 'react';
import { Card, Tabs, Row, Col } from 'antd';
import './index.css';

// 用户数据接口
interface UserData {
  id: number;
  username: string;
  nickname: string;
  email: string;
  mobile: string;
  avatar?: string;
  sex?: number;
  dept?: {
    name: string;
  };
  posts?: Array<{ name: string }>;
  roles?: Array<{ name: string }>;
  createTime: string;
}

// UserInfo 组件
const UserInfo: React.FC<{ userInfo: UserData; onAvatarChange: (url: string) => void }> = ({ userInfo, onAvatarChange }) => {
  return (
    <div style={{ textAlign: 'center', padding: '24px' }}>
      <div style={{ marginBottom: '24px' }}>
        <div 
          style={{ 
            width: '80px', 
            height: '80px', 
            borderRadius: '50%', 
            backgroundColor: '#1890ff',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'white',
            fontSize: '24px',
            margin: '0 auto'
          }}
        >
          {userInfo.avatar ? (
            <img 
              src={userInfo.avatar} 
              alt="头像" 
              style={{ width: '80px', height: '80px', borderRadius: '50%', objectFit: 'cover' }}
            />
          ) : (
            '头像'
          )}
        </div>
      </div>
      <div style={{ marginBottom: '16px' }}>
        <h3>{userInfo.nickname}</h3>
        <p style={{ color: '#666' }}>@{userInfo.username}</p>
      </div>
      <div style={{ textAlign: 'left' }}>
        <div style={{ marginBottom: '8px' }}>
          <span style={{ color: '#666' }}>邮箱：</span>
          <span>{userInfo.email}</span>
        </div>
        <div style={{ marginBottom: '8px' }}>
          <span style={{ color: '#666' }}>手机：</span>
          <span>{userInfo.mobile}</span>
        </div>
        <div style={{ marginBottom: '8px' }}>
          <span style={{ color: '#666' }}>部门：</span>
          <span>{userInfo.dept?.name || '未设置'}</span>
        </div>
        <div style={{ marginBottom: '8px' }}>
          <span style={{ color: '#666' }}>角色：</span>
          <span>{userInfo.roles?.map(role => role.name).join(', ') || '未设置'}</span>
        </div>
        <div>
          <span style={{ color: '#666' }}>创建时间：</span>
          <span>{userInfo.createTime}</span>
        </div>
      </div>
    </div>
  );
};

// BasicInfo 组件
const BasicInfo: React.FC<{ userInfo: UserData; onUpdate: (updatedInfo: Partial<UserData>) => void }> = ({ userInfo, onUpdate }) => {
  return (
    <div style={{ padding: '24px' }}>
      <h4>基本信息</h4>
      <p>在这里可以编辑您的基本信息</p>
    </div>
  );
};

// ResetPassword 组件
const ResetPassword: React.FC = () => {
  return (
    <div style={{ padding: '24px' }}>
      <h4>修改密码</h4>
      <p>在这里可以修改您的登录密码</p>
    </div>
  );
};

// UserSocial 组件
const UserSocial: React.FC = () => {
  return (
    <div style={{ padding: '24px' }}>
      <h4>社交账号</h4>
      <p>在这里可以管理您的社交账号绑定</p>
    </div>
  );
};

const UserCenter: React.FC = () => {
  const [userData, setUserData] = useState<UserData>({
    id: 1,
    username: 'admin',
    nickname: '管理员',
    email: 'admin@example.com',
    mobile: '13800138000',
    avatar: '',
    sex: 1,
    dept: { name: '技术部' },
    posts: [{ name: '前端开发工程师' }],
    roles: [{ name: '管理员' }],
    createTime: '2024-01-01 10:00:00'
  });

  const [activeTab, setActiveTab] = useState('basic');

  useEffect(() => {
    // 从localStorage加载用户信息
    const storedUserInfo = localStorage.getItem('userInfo');
    if (storedUserInfo) {
      try {
        const parsedUserInfo = JSON.parse(storedUserInfo);
        setUserData(prev => ({ ...prev, ...parsedUserInfo }));
      } catch (error) {
        console.error('解析用户信息失败:', error);
      }
    }
  }, []);

  const handleUserUpdate = (updatedInfo: Partial<UserData>) => {
    const newUserData = { ...userData, ...updatedInfo };
    setUserData(newUserData);
    localStorage.setItem('userInfo', JSON.stringify(newUserData));
  };

  const handleAvatarChange = (url: string) => {
    handleUserUpdate({ avatar: url });
  };

  const tabItems = [
    {
      key: 'basic',
      label: '基本信息',
      children: <BasicInfo userInfo={userData} onUpdate={handleUserUpdate} />
    },
    {
      key: 'password',
      label: '修改密码',
      children: <ResetPassword />
    },
    {
      key: 'social',
      label: '社交账号',
      children: <UserSocial />
    }
  ];

  return (
    <div className="user-center">
      <Row gutter={24}>
        <Col xs={24} md={8}>
          <Card className="user-info-card" title="个人信息">
            <UserInfo userInfo={userData} onAvatarChange={handleAvatarChange} />
          </Card>
        </Col>
        <Col xs={24} md={16}>
          <Card className="user-detail-card">
            <Tabs
              activeKey={activeTab}
              onChange={setActiveTab}
              items={tabItems}
              className="profile-tabs"
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default UserCenter;